<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <form class="layui-form" action="" id="creditsAddForm" lay-filter="creditsAddFormFilter">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="name" name="name"
                               lay-verify="required|name" lay-reqtext="姓名为必填项！"
                               autocomplete="off" placeholder="请输入姓名">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">学号<span style="color: red">*</span> </label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="code" name="code"
                               lay-verify="required|code" autocomplete="off"
                                lay-reqtext="学号为必填项！" placeholder="请输入学号">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">年级<span style="color: red">*</span></label>
                    <div class="layui-input-block" >
                        <input type="text" class="layui-input"
                               id="grade" name="grade" lay-filter="grade"
                               placeholder="请选择入学年份" autocomplete="off"
                               lay-verify="required" lay-reqtext="入学年份为必填项！" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">院系<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="college" name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">取得时间<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text"  class="layui-input"
                               id="achieveTime" name="achieveTime"
                               lay-verify="required" lay-reqtext="取得时间为必填项！"
                               placeholder="请选择取得时间" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分值<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="score" name="score"
                               placeholder="请输入分值" autocomplete="off"
                               lay-verify="required|score" lay-reqtext="分值为必填项！">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">事由<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="reason" name="reason" lay-filter="reason" lay-verify="required" lay-reqtext="事由为必填项">
                            <option value="">请选择</option>
                            <option value="项目数据库设计">项目数据库设计</option>
                            <option value="竞赛项目">竞赛项目</option>
                            <option value="创新网页">创新网页</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">录入人<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="enterMan" name="enterMan"
                               lay-verify="required|name" lay-reqtext="录入人为必填项！"
                               autocomplete="off" placeholder="请输入录入人">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
            <textarea placeholder="请输入备注信息" class="layui-textarea"
                      id="remark" name="remark" lay-filter="remark"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" id="saveBtn" class="layui-btn layui-btn-normal"
                                lay-submit="" lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
    layui.use(['form','layedit','laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layedit=layui.layedit,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear;

        form.render();

        function formInit() {
            //初始化加载院系
            let url = 'CollegeServlet';
            let params = {method: 'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let colleges = res.data;
                for (let i = 0; i < colleges.length; i++) {
                    $('#college').append("<option value='"+colleges[i].id+"'>"+colleges[i].name+"</option>");
                }
                form.render('select');
            };
            $.get(url, params, successFn);
        }
        formInit();

        $("#name").blur(function(){
            var name = $("#name").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(name.length == 0|| name==null || name == '') {
                layer.msg('姓名为必填项！', {icon: 5});
            }else{
                if(!reg.test(name)) {
                    layer.msg('姓名应为2-6个汉字', {icon: 5});
                }
            }
        });
        $("#code").blur(function(){
            var code = $("#code").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(code.length == 0|| code==null || code == '') {
                layer.msg('学号为必填项！', {icon: 5});
            }else{
                if(code.length!=10) {
                    layer.msg('学号应为10位的纯数字！', {icon: 5});
                }
            }
        });
        $("#score").blur(function(){
            var score = $("#score").val();
            if(score.length == 0|| score==null || score == '') {
                layer.msg('分值为必填项！', {icon: 5});
            }else{
                if(score<0||score>100) {
                    layer.msg('分值大小应在0到100！', {icon: 5});
                }
            }
        });

        //监听提交
        form.verify({
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,6}$/.test(value)==false){
                    return '姓名为2-6位汉字！'
                }
            },
            code:function (value) {
                if(value.length<10){
                    return '学号应为长10位的纯数字！'
                }
            },
            score:function (value) {
                if(value<0||value>100){
                    return '分值大小应在0到100！'
                }
            },

        });


        laydate.render({
            elem:'#achieveTime',
            trigger:'click', //解决日历一闪而过的问题
        });

        laydate.render({
            elem:'#grade',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#grade").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        })


        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = 'CreditsServlet?method=add';
            let successFn = function (res) {
                if (res == 'true') {
                    layer.close(parentIndex);
                    layer.msg("添加成功",{icon: 1});
                    $('#creditsAddForm')[0].reset();
                    form.render();
                    if ('undefined' != typeof parent) {
                        parent.layui.table.reload('currentTableId');
                    }
                }
            };
            $.post(url, data.field, successFn);
        });
    });
</script>